<template>
  <div class="app-container">
    <!--工具栏-->
    <div>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="query.data"
            placeholder="请输入表名称"
            clearable
          />
        </el-col>
        <el-col :span="2">
          <el-button icon="el-icon-search" type="success" @click="getAllCodeConfigData">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button icon="el-icon-refresh" type="warning" @click="asyncTables">同步表信息</el-button>
        </el-col>
      </el-row>

    </div>
    <!--表格渲染-->
    <el-table :data="configList" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="tableName" label="表名称" sortable />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="engine" label="引擎" sortable />
      <el-table-column prop="tableCollation" label="编码集" />
      <el-table-column width="180" label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small">预览</el-button>
          <el-button type="text" size="small" @click="config(scope.row.tableName)">配置</el-button>
          <el-button type="text" size="small">生成</el-button>
          <el-button type="text" size="small">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      :current-page="query.current"
      :page-size="query.size"
      :page-sizes="[10,20,50,100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { asyncTables, getCodeConfigList } from '@/api/generator/generator'

export default {
  data() {
    return {
      query: {
        current: 0,
        size: 10,
        data: ''
      },
      headers: {},
      configList: [],
      total: 0,
      multipleSelection: []
    }
  },
  created() {
    this.getAllCodeConfigData()
  },
  methods: {
    async getAllCodeConfigData() {
      await getCodeConfigList(this.query, this.headers).then(res => {
        this.configList = res.data.records
        this.total = res.data.total
      }).catch(err => {
        console.error(err)
      })
    },
    async asyncTables() {
      await asyncTables().then(res => {
        if (res.data.code === 0) {
          this.$message.success('同步信息成功')
          this.getAllCodeConfigData()
        } else {
          this.$message.error('同步信息失败')
        }
      }).catch(error => {
        console.error(error)
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    handleSizeChange(newSize) {
      this.query.size = newSize
      this.getAllCodeConfigData()
    },
    handleCurrentChange(newCurrentPage) {
      this.query.current = newCurrentPage
      this.getAllCodeConfigData()
    },
    config(tableName) {
      this.$router.push({ path: '/generator-config', query: { tableName: tableName }})
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .el-row {
    margin: 15px 4px;
  }
</style>
